<template>
  <div class="waterDistributionPlans">
    <TitleColumn name="预案列表" />
    <div class="content">
      <div class="search">
        <span class="title">方案名称：</span>
        <a-input-search
          v-model:value="state.searchValue"
          placeholder="请输入方案名称"
          style="width: 250px"
          @search="onSearch"
        />
      </div>
      <!-- 方案列表 -->
      <ul class="list">
        <li
          class="listItem"
          v-for="(item, index) in selectData"
          :key="index"
          @click="handleClick(item)"
        >
          <h3 class="title">
            <i class="icon"></i><strong>{{ item.name }}</strong>
          </h3>
          <section>
            <p>
              计划执行时间： <span>{{ item.time }}</span>
            </p>
            <p>
              执行类型： <span>{{ item.type == "1" ? "排涝" : "灌溉" }}</span>
            </p>
            <p>{{ item.total }}</p>
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import TitleColumn from "@/components/TitleColumn";

defineOptions({ name: "WaterDistributionPlans" });

const props = defineProps({
  selectData: { type: Object },
  handleClickRow: { type: Object },
});

const state = reactive({
  searchValue: "",
});

const handleClick = (data) => {
  props.handleClickRow(data);
};

const onSearch = () => {
  console.log("object");
};

watch(
  () => props.selectData,
  (val) => {
    console.log(val, "sssss");
    props.handleClickRow(val[0]);
  }
);
</script>

<style lang="less" rel="stylesheet/less" scoped>
.waterDistributionPlans {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    padding: 10px 14px 10px 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #02123433;
    backdrop-filter: blur(10px);
    .search {
      display: flex;
      align-items: center;
      height: 50px;
      .title {
        color: #b4dfff;
      }
      ::v-deep(.ant-input) {
        background: #0028517a;
        border: 1px solid;
        border-image: linear-gradient(
          181deg,
          rgba(6, 183, 253, 0.4) 3.03%,
          #51fbff 47.23%,
          rgba(6, 183, 253, 0.4) 91.41%
        );
        border-image-slice: 1;
        box-shadow: 0px 0px 6.92px 0px #06b7fd inset;
        color: #b4dfff;
      }
      ::v-deep(.ant-input-search-button) {
        background: linear-gradient(
          180deg,
          rgba(0, 40, 81, 0.6) -10.87%,
          rgba(2, 110, 194, 0.6) 80.43%
        );
        border: 1px solid;
        border-image: linear-gradient(
          90deg,
          rgba(220, 237, 255, 0.32) 0%,
          #dcedff 45.95%,
          rgba(220, 237, 255, 0.32) 95.89%
        );
        border-image-slice: 1;
        box-shadow: 0px 0px 16px 0px #06b7fd inset;
        backdrop-filter: blur(4px);
        svg {
          color: #fff;
        }
      }
    }
    ul.list {
      width: 100%;
      height: calc(100% - 100px);
      overflow: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      li.listItem {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        h3.title {
          display: flex;
          align-items: center;
          i.icon {
            width: 26px;
            height: 26px;
            display: inline-block;
            background: url(./images/icon.png) no-repeat;
            background-size: contain;
            margin-top: 6px;
          }
          strong {
            color: #fff;
            font-style: italic;
          }
        }
        section {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40px;
          position: relative;
          padding: 0 10px;
          cursor: pointer;
          background: linear-gradient(
            84.22deg,
            rgba(2, 110, 194, 0.26) 36.82%,
            rgba(6, 183, 253, 0) 86.31%
          );
          &::before {
            content: "";
            display: inline-block;
            width: calc(100% + 20px);
            height: 100%;
            background: url(./images/bg.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: -10px;
          }
          &::after {
            content: "";
            display: inline-block;
            width: calc(100% + 20px);
            height: 2px;
            background: url(./images/line.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            bottom: -4px;
            left: -10px;
          }
          &:hover {
            background: linear-gradient(0deg, #06b7fd -17.86%, rgba(6, 183, 253, 0) 100%);
            p {
              color: #51fbff;
            }
          }
          p {
            color: #fff;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
